<template>
	<view class="content">
		<view class="menu">
			<view class="item" style="position: relative">
				<view class="" >
					<image class="img" src="/static/index/at.png" mode=""></image>
					<view class="text" v-if="Interact!=0">
						{{Interact}}
					</view>
				</view>
				<view class="menu-message">互动消息</view>
			</view>
			<view class="item" style="position: relative" @click="System">
				<view class="" >
					<image class="img" src="/static/index/bell.png" mode=""></image>
					<view class="text" v-if="system!=0">
						{{system}}
					</view>
				</view>
				<view class="menu-message">系统消息</view>
			</view>	
		</view>
		<view style="height: 30rpx;width: 100%;background-color: #F8F8F8;"></view>
		<view class="message-list">
			<view class="message-item" v-for="(item, uuid) in friendList" :key="uuid" @click="enterChat(item)">
				<view class="headimg">
					<image :src="item.headimg"  class="message-img"></image>
				</view>
				<view class="content">
					<view class="header">
						<view class="title">{{ item.nick_name || item.username }}</view>
						<view class="time">
							{{item.time}}
						</view>
					</view>
					<view class="remark" v-if="item.text">{{ item.text}}</view>
					<view class="remark" v-else>{{ item.online ==1? '在线' : '离线' }}</view>
				</view>
			</view>
		</view>
		<!-- <view class="beijing" v-if="friendList.length == 0 || friendList == undefined">
			<img src="@/static/imgs/qsy.png" alt="" style="width: 303rpx;height: 314rpx;">
			<view class="txt">暂无数据</view>
		</view> -->
	</view>
</template>

<script>
// import {messagelist } from '@/api/user/index';
// import { mapGetters } from 'vuex';
// import IMService from '@/lib/goeasy/imservice.js';
// import {getFriendList} from '@/api/user/index'
export default {
	name: 'index',
	data() {
		return {
			friendList: [
                {
                    headimg:"https://yl.weilankangyang.com/upload/ea/391b971b07c53494be0658b8066136.png",
                    nick_name:"客服1",
                    text:"你好",
                    time:'2023-08-25'
                },
                {
                    headimg:"https://yl.weilankangyang.com/upload/ea/391b971b07c53494be0658b8066136.png",
                    nick_name:"客服2",
                    text:"你好",
                     time:'2023-08-25'
                },
                {
                    headimg:"https://yl.weilankangyang.com/upload/ea/391b971b07c53494be0658b8066136.png",
                    nick_name:"客服3",
                    online:'1',
                    time:'2023-08-25'
                }
            ],
			friendIds: [],
			itemList: [],
			size: 15,	//每页多少条
			page: 1,//页数
			totalPage: '',//总页数
			total: 0,	//总数量
			//房源消息
			housing:"",
			//系统消息
			system:"",
			//互动消息
			Interact:"",
			//客源消息
			// Source:'',
		};
	},
	
	// computed: {
	// 	...mapGetters(['userInfo'])
	// },
	
	onShow() {
		//获取系统消息
		// messagelist().then(res=>{
		// 	console.log(res,'===')
		// 	this.housing = res.data.house_message.num
		// 	this.system = res.data.system_message.num
		// 	this.Interact = res.data.question_message.num
		// 	// this.Source = res.data.huDong_message.num
		// })
		// this.total = 0;
		// this.friendList = []
		// this.page = 1
		// //获取好友列表
		// this.getFriendList()
		// uni.stopPullDownRefresh();
		
	},
	//下拉刷新
	onPullDownRefresh() {
		//获取系统消息
		messagelist().then(res=>{
			console.log(res,'===')
			this.housing = res.data.house_message.num
			this.system = res.data.system_message.num
			this.Interact = res.data.question_message.num
			// this.Source = res.data.huDong_message.num
		})
		this.total = 0;
		this.friendList = []
		this.page = 1
		//获取好友列表
		this.getFriendList()
	
	},
	onReachBottom() {
				if(this.page < this.totalPage) {
					this.page = ++this.page;
					this.getFriendList()
				}
				
						
			},
	onLoad() {
		
	},
	
	// onShow() {
		
	// },
	
	methods: {
		//获取好友列表
		getFriendList() {
			// 这里请求接口
			getFriendList({page:this.page}).then(res => {
				console.log(res)
				res.data.map(item => {
					item.headimg = item.headimg ? item.headimg : 'https://z3.ax1x.com/2021/11/20/Iqo3TJ.png'
				})
				this.total = res.count
				this.page = res.page
				console.log(this.page,'yeshu')
				this.totalPage=res.total_page
				this.friendList = this.friendList.concat(res.data)
				uni.stopPullDownRefresh()
				this.init()
			})
		},
		
		//初始化数据
		init() {
			//判断连接是否正常连接
			if (this.goEasy.getConnectionStatus() === 'disconnected') {
				getApp().globalData.imService = new IMService(this.goEasy, this.GoEasy)
				getApp().globalData.imService.connect(this.userInfo,this.friendList)
			}
			
			// 获取好友id 集合
			this.subscribeUserPresence();
			//获取好友在线状态
			this.hereNow();
			this.goEasy.im.on(this.GoEasy.IM_EVENT.USER_PRESENCE, user => {
				this.friendList.map(friend => {
					if (friend.uuid == user.id) {
						let state = user.action === 'online' || user.action === 'join';
						this.$set(friend, 'online', state);
					}
				});
			});
			
			
			//监听是否有新的消息
			this.goEasy.im.on(this.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, (content) => {
				//判断是否有新的消息
				if(content.conversations.length > 0){
					this.itemList = []
					for(var i = 0; i < content.conversations.length; i++){
						if(this.itemList.indexOf(content.conversations[i].userId) === -1 && content.conversations[i].userId === content.conversations[i].lastMessage.senderId){
							this.itemList.push(content.conversations[i].userId)
						}
					}
				}
			});
			 
			let that = this;
			// setTimeout(function () {
			//     that.friendList.map((item,index) => {
			// 		if(that.itemList.toString().indexOf(item.uuid) != -1){
			// 			that.$set(item, 'text', '您有一条新的消息~');
			// 		}
			//     })		
			// }, 1000);
			
		},
		// 获取好友id 集合
		subscribeUserPresence() {
			this.friendList.map(friend => {
				this.friendIds.push(friend.uuid);
			});
			this.goEasy.im.subscribeUserPresence({
				userIds: this.friendIds,
				onSuccess: function() {
					console.log('订阅上下线成功');
				},
				onFailed: function(error) {
					console.log('订阅好友上下线失败', error);
				}
			});
		},
		// 获取好友状态
		hereNow() {
			let self = this;
			let friendIds = [];
			this.friendList.map(friend => {
				friendIds.push(friend.uuid);
			});
			this.goEasy.im.hereNow({
				userIds: friendIds,
				onSuccess: function(result) {
					result.content.map(friend => {
						self.friendList.map(item => {
							if (item.uuid == friend.id) {
								item.online = true;
							}
						});
					});
				},
				onFailed: function(error) {
					console.log('获取好友在线状态失败', error);
				}
			});
		},
		
		//进入私聊
		enterChat(item) {
			console.log(item)
            console.log(">>>>>>>>>执行进入chat页面")
            uni.navigateTo({
               url: "/pagesA/chatroom/chatroom"
            })
			// this.markPrivateMessageAsRead(item.uuid);
			// this.$navigateTo({
			// 	url: '/pages/message/friend-info/index',
			// 	params: {
			// 		uuid: item.uuid,
			// 		name: item.nick_name ? item.nick_name : item.user_name,
			// 		avatar: item.headimg
			// 	}
			// });
		},
		
		markPrivateMessageAsRead(friendId) {
			this.goEasy.im.markPrivateMessageAsRead({
				userId: friendId,
				onSuccess: function() {
					console.log('标记为已读成功');
				},
				onFailed: function(error) {
					console.log(error);
				}
			});
		},
		
		//跳转系统消息
		System(){
			uni.navigateTo({
				url: '/pagesA/message/message'	
			})
		},
		//跳转房源消息
		houseNews(){
			this.$navigateTo({
				url: '/package/message/home-message/index'	
			})
		},
		//跳转互动消息
		 interact(){
			this.$navigateTo({
				url: '/package/message/interaction-message/index'	
			})
		},
	}
};
</script>

<style lang="scss">
.content {
	.menu {
		padding: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		.item {
			text-align: center;
			position: relative;
			.img {
				width: 90rpx;
				height: 90rpx;
			}
			.menu-message {
				font-size: 26rpx;
				font-weight: 400;
				color: #000000;
			}
			.text{
				width: 40rpx;
				height: 40rpx;
				background-color: red;
				border-radius: 100rpx;
				display: flex;
				align-items:center;
				justify-content: center;
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				font-size: 22rpx;
				color: #FFFFFF;
			}
		}
	}
	.message-list {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: auto;
		// overflow: hidden;
		.message-item {
			width: 100%;
			border-bottom: 1rpx solid #EEEEEE;
			display: flex;
			flex-direction: row;
			padding: 20rpx 0;
			box-sizing: border-box;
			justify-content: flex-start;
			// position: relative;
			.headimg{
				width: 15%;
				.message-img {
					width: 90rpx;
					height: 90rpx;
					border-radius: 100rpx;
				}
			}
			
			// .text {
			// 	position: absolute;
			// 	top: 20rpx;
			// 	left: 85rpx;
			// 	background-color: #fc3602;
			// 	color: #ffffff;
			// 	width: 40rpx;
			// 	height: 40rpx;
			// 	border-radius: 20rpx;
			// 	line-height: 40rpx;
			// 	text-align: center;
			// 	z-index: 99;
			// 	font-size: 20rpx;
			// }
			.content {
				width: 85%;
				height: auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 20rpx;
				.header {
					height: 60rpx;
					line-height: 60rpx;
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.title {
						text-align: left;
						color: #000000;
						font-weight: bold;
						font-size: 30rpx;
					}
					.time {
						text-align: right;
						line-height: 60rpx;
						font-size: 24rpx;
						color: #999999;
					}
				}
				.remark {
					width: 500rpx;
					height: auto;
					overflow: hidden;
					color: #999999;
					font-size: 26rpx;
				}
			}
		}
	}
}
.beijing {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 340rpx;
		.txt {
			color: #333;
			font-size: 36rpx;
			font-weight: 700;
			margin-top: 57rpx;
		}
	}
</style>
